<template>
  <div class="ShoppingCart">
    <!-- 顶部位置 -->
    <div class="ShoppingCartTOP">
      <div class="ShoppingCartTOPNode">
        <div>
          <i></i>中共南京市秦淮区委员会
          <i>(当前位置)</i>
        </div>
      </div>
    </div>
    <!-- 商品 -->
    <div class="Shoppingitems">
      <div class="ShoppingitemsName">
        <p>
          沃尔玛-新街口店
          <i></i>
        </p>
        <div class="ShoppingitemsInformation">
          <div
            class="ShoppingitemsNode"
            v-for="{id,imgUrl,title}
          in ShoppingitemsInformation"
            :key="id"
          >
            <div>
              <img :src="imgUrl" />
            </div>
            <span>{{title}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="OtherLocations">
      <div class="OtherLocationsNode">
        <div>
          <i></i>其他位置
        </div>
      </div>
    </div>
    <div class="Shoppingitems">
      <div class="ShoppingitemsName">
        <p>
          华润苏果-六合紫晶店
          <i></i>
        </p>
        <div class="ShoppingitemsInformation">
          <div
            class="ShoppingitemsNode"
            v-for="{id,imgUrl,title}
          in ShoppingitemsInformation2"
            :key="id"
          >
            <div>
              <img :src="imgUrl" />
            </div>
            <span>{{title}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ShoppingitemsInformation: [],
      ShoppingitemsInformation2: [],
    };
  },
  created() {
    this.getShoppingitemsInformation();
    this.getShoppingitemsInformation2();
  },
  methods: {
    async getShoppingitemsInformation() {
      const {
        data: { data },
      } = await this.api.getShoppingitemsInformation();
      this.ShoppingitemsInformation = data;
    },
    async getShoppingitemsInformation2() {
      const {
        data: { data },
      } = await this.api.getShoppingitemsInformation2();
      this.ShoppingitemsInformation2 = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.ShoppingCart {
  background-color: #f6f6f6;
  height: 618px;
  .ShoppingCartTOP {
    padding: 15px 0;
    text-align: center;
    .ShoppingCartTOPNode {
      padding: 6px 7px;
      border-radius: 32px;
      background-color: #d1e7d3;
      display: inline-block;
      > div {
        line-height: 22px;
        padding: 0 14px 0 31px;
        border-radius: 22px;
        font-size: 14px;
        color: #fff;
        background: #47b34f;
        position: relative;
        > i:nth-child(1) {
          display: inline-block;
          width: 15px;
          height: 15px;
          background: url(../../public/uploads/site.png) no-repeat;
          background-size: 10px 12px;
          position: absolute;
          left: 13px;
          top: 5px;
        }
        > i:nth-child(2) {
          font-size: 12px;
          font-style: normal;
          padding-left: 2px;
        }
      }
    }
  }
  .Shoppingitems {
    width: 100%;
    height: 154px;
    .ShoppingitemsName {
      height: 141px;
      margin: 0 6px 7px;
      padding: 3px 4% 10px 1.6%;
      background: url(../../public/uploads/beijingtu.png) no-repeat;
      background-size: 100%;
      > p {
        height: 44px;
        color: #333;
        font-size: 15px;
        line-height: 44px;
        padding-left: 2.4%;
        position: relative;
        > i {
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url(../../public/uploads/right.png) no-repeat;
          background-size: 7px 11px;
          position: absolute;
          top: 15px;
          right: 0px;
        }
      }
      .ShoppingitemsInformation {
        height: 92px;
        padding-left: 2.4%;
        display: flex;
        .ShoppingitemsNode {
          width: 52px;
          margin-right: 6px;
          > div {
            width: 52px;
            height: 52px;
            margin-top: 14px;
            > img {
              width: 52px;
            }
          }
          > span {
            font-size: 12px;
          }
        }
      }
    }
  }
  .OtherLocations {
    padding: 15px 0;
    text-align: center;
    .OtherLocationsNode {
      display: inline-block;
      padding: 6px 7px;
      border-radius: 32px;
      background-color: #e2e2e2;
      > div {
        background-color: #999;
        padding: 0 14px 0 31px;
        border-radius: 22px;
        font-size: 14px;
        color: #fff;
        position: relative;
        > i {
          display: inline-block;
          width: 15px;
          height: 15px;
          background: url(../../public/uploads/site.png) no-repeat;
          background-size: 10px 12px;
          position: absolute;
          left: 13px;
          top: 3px;
        }
      }
    }
  }
}
</style>
